<template>
  <div class="diinner">
    <div class="inner1">
      <i class="el-icon-arrow-down" @click="change"></i>
      <p class="a1">充值记录</p>
      <div class="a2" v-for="(item, i) in list1" :key="i">
        <p class="a3">￥:<span></span>{{ item.money }}</p>
        <!-- <p>{{item.id}}</p> -->
        <p class="a4">订单编号{{ item.number }}</p>
        <i @click="del(item.mid)" class="iconfont icon-shibai"></i>
        <p class="a5">{{ item.date }}</p>
        <!-- <p>{{ item.timeNow }}</p> -->
      </div>
    </div>
    <div v-show="list1 == null" class="box">
      <img class="img1" src="../../../assets/u2396.png" alt="" />
    </div>
    <h2 v-show="list1 == null">您的充值记录空空如也...</h2>
  </div>
</template>

<script>
import { showTop } from "@/api";
export default {
  created() {
    this.showTop();
  },
  data() {
    return {
      list1: [],
      list: [],
    };
  },
  methods: {
    change() {
      this.$router.go(-1);
    },
    showPay() {
      let id = this.$store.state.id;
      // showPay({uid:id}).then((res) => {
      //   console.log(res, "res 充值记录");
      // });
    },
    del(item) {
      let id = item;
      this.list1 = this.list1.filter((item) => item.mid !== id);
    },
    showTop() {
      let id = this.$store.state.id;
      showTop({ uid: id }).then((res) => {
        this.list1 = res.data.data;
      });
    },
  },
};
</script>

<style scoped>
.diinner {
  margin-bottom: 2vh;
}
.diinner .box {
  display: flex;
  justify-content: center;
}
.diinner .box .img1 {
  margin-top: 20vh;
  width: 23vh;
  height: 20vh;
}
.diinner h2 {
  text-align: center;
  font-size: 30px;
  margin-top: 3vh;
  color: #999;
}
.inner {
  height: 100vh;
  width: 100vw;
  margin-bottom: 10vh;
}
.el-icon-arrow-down {
  transform: rotate(90deg);
  margin-top: 1vh;
  margin-left: 2vw;
  position: absolute;
  /* top: 200px; */
  font-size: 3vw;
  left: 0vw;
  height: 5vh;
  color: black;
  font-weight: bold;
}
.a1 {
  width: 98vw;
  font-size: 4vw;
  text-align: center;
  line-height: 7vh;
}
.a2 {
  position: relative;
  padding: 2vh 0;
  border-bottom: 1px solid #666;
}
.a2 i {
  position: absolute;
  right: 1vw;
  top: 2vh;
  font-size: 4.2vw;
}
.a3 {
  color: red;
  float: right;
  font-size: 3.6vw;
  margin-right: 5vw;
  margin-top: 2vh;
  padding-right: 3vw;
}
.a4 {
  font-size: 4vw;
  height: 5vh;
  line-height: 5vh;
  margin-left: 4vw;
}
.a5 {
  font-size: 3vw;
  color: #999;
  height: 3vh;
  line-height: 3vh;
  margin-left: 4vw;
}
</style>